<template>
	<view class="page">
		<view class="box_1">
			<view class="box_4">
				<image :src="po29" mode=""></image>
			</view>
			<view class="list_1" v-if="detail.list != ''">
				<!-- @click="sports_data" -->
				<view class="list-items_1-0" v-for="(item, index) in detail.list" :key="index" >
					<view class="image-text_2-0">
						<image v-if="index == 0" style="width: 34rpx;height: 62rpx;" :src="one1" mode=""></image>
						<image v-if="index == 1" style="width: 34rpx;height: 62rpx;" :src="one2" mode=""></image>
						<image v-if="index == 2" style="width: 34rpx;height: 62rpx;" :src="one3" mode=""></image>
						<image v-if="index == 3" style="width: 34rpx;height: 62rpx;" :src="one4" mode=""></image>
						<image v-if="index == 4" style="width: 34rpx;height: 62rpx;" :src="one5" mode=""></image>
						<image v-if="index == 5" style="width: 34rpx;height: 62rpx;" :src="one6" mode=""></image>
						<text v-if="index >5" lines="1" class="text-group_1-0">{{index + 1}}</text>
						<image :src="item.head_pic" class="image_3-0"></image>
						<text lines="1" class="text-group_2-0">{{item.name}}</text>
					</view>
					<view class="">
						<text lines="1" class="text_3-0">{{item.length}}h</text>
					</view>
				</view>
			</view>
			<view class="" v-else style="margin-top: 80rpx;">
				<u-empty mode="coupon" text="敬请期待"
					icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />

			</view>
			<!-- <text lines="1" class="text_5">更多好友排行</text> -->
			<view class="" style="margin-bottom: 20rpx;" v-if="detail.list != ''">
				<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="更多好友排行" nomore-text="到底了"
					@loadmore="loadNewsList" color="#729E87" fontSize="11px" />
			</view>
		</view>
		<u-popup border-radius="14" mode='center' :mask-close-able="false" :closeable="false" :show="showPopup">
			<view class="not-logged-in">
				<view class="title">是否同意加入排行榜</view>
				<view class="desc">{{nickname}}</view>
				<u-image width="113" height="90" :src="logosrc"></u-image>
				<!-- <view class="desc">需要手机号授权登录</view> -->
				<!-- <view class="desc2">登录后可以体验更多精彩功能哦</view> -->
				<view class="btns">
					<button class="btn2" @click="cancelogin">取消授权</button>
					<button class="btn" @click="onGet">立即授权</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				logosrc: uni.getStorageSync("heading"),
				nickname: uni.getStorageSync("nickname"),
				po35: this.$https.assetsPath + 'po35.png',
				po29: this.$https.assetsPath + 'po29.png',
				one1: this.$https.assetsPath + 'one1.png',
				one2: this.$https.assetsPath + 'one2.png',
				one3: this.$https.assetsPath + 'one3.png',
				one4: this.$https.assetsPath + 'one4.png',
				one5: this.$https.assetsPath + 'one5.png',
				one6: this.$https.assetsPath + 'one6.png',
				status: "loading",
				detail: {
					list: [],
					tabList: [], //图标菜单
					hiddenTab: false, //隐藏tab
				},
				page: 1,
				showPopup: false
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.top_agree == 1) {
				this.showPopup = false
				this.exerciseSort()
			} else{
				this.showPopup = true
			}
		},
		onShow() {

		},

		methods: {
			async onGet() {
				let data = {
					open_id: uni.getStorageSync('openid'),
				}
				let result = await subscribe.permitExerciseSort(data)
				if (result.code == 1) {
					this.showPopup = false
					this.exerciseSort()
				}
			},
			cancelogin() {
				this.showPopup = false
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取分类商品
			async exerciseSort() {
				let data = {
					open_id: uni.getStorageSync('openid'),
					pagesize: 7,
					page: this.page,
				}
				let result = await subscribe.exerciseSort(data)
				if (result.code == 1) {
					if (this.detail.list.length < 1) {
						this.detail.list = result.data.data;
					} else {
						this.detail.list.push(...result.data.data);
					}
					this.status = "loadmore";

					if (result.data.data.length < 7) {
						this.status = "nomore";
					}
				}
			},
			loadNewsList() {
				this.status = "loading";
				this.page += 1;
				this.exerciseSort();
			},
			sports_data() {
				uni.navigateTo({
					url: './sports_data'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.not-logged-in {
		width: 619rpx;
		height: 508rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999999;
		border-radius: 10rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			padding-top: 43rpx;
		}

		.close {
			color: #AAAAAAFF;
			font-size: 40rpx;
			font-weight: bold;
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}

		/deep/ .u-image {
			margin: auto;
			margin-top: 52rpx;
		}

		.desc {
			font-size: 30rpx;
			color: #000000;
			font-weight: bold;
			text-align: center;
			margin-top: 20rpx;
		}

		.desc2 {
			color: #ADADADFF;
			font-size: 26rpx;
			text-align: center;
			margin-top: 18rpx;
		}

		.btns {
			display: flex;

			.btn {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #4BA677;
				border-top: 1px solid #E6E6E6FF;
			}

			.btn2 {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #000;
				border-top: 1px solid #E6E6E6FF;
			}
		}
	}

	.box_1 {
		// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
		background-color: rgba(255, 255, 255, 1.0);
		display: flex;
		flex-direction: column;
		padding: 29rpx 12rpx 18rpx 20rpx;
	}

	.box_4 {
		background-color: rgba(255, 255, 255, 1.0);
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		padding: 0 0 20rpx 0;

		image {
			width: 710rpx;
			height: 200rpx;
		}
	}

	.list_1 {
		// height: 960rpx;
		margin-right: 8rpx;
		display: flex;
		flex-direction: column;
	}

	.list-items_1-0 {
		width: 710rpx;
		background-size: 100% 100%;
		margin-bottom: 20rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		height: 140rpx;
		background: #F4F9F9;
		border-radius: 20rpx;
		align-items: center;
	}

	.image-text_2-0 {
		// width: 170rpx;
		flex-direction: row;
		display: flex;
		align-items: center;
	}

	.image_3-0 {
		width: 100rpx;
		height: 100rpx;
		margin-left: 20rpx;
		border-radius: 50%;
	}

	.text-group_1-0 {
		font-size: 44rpx;
		color: #333333;
		line-height: 62rpx;
		text-align: left;
		font-weight: 700;
	}

	.text-group_2-0 {
		width: 84rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		// line-height: 24rpx;
		margin-left: 15rpx;
	}

	.text_3-0 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 37rpx;
	}

	.text_4-0 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 37rpx;
		margin: 0 0 0 20rpx;
	}


	.text_5 {
		overflow-wrap: break-word;
		color: rgba(114, 158, 135, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 40rpx;
	}
</style>